import React, { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { NavBar, Space, Popup, Button } from "antd-mobile";
import { SendOutline } from "antd-mobile-icons";
import { GoodJob,Manager } from '@react-vant/icons';
import styles from "./index.module.css";
import zxzx from "./image/zxzx.jpg";
import fzkf from "./image/fzkf.jpg";
import yxyf from "./image/yxyf.jpg";
import mzyy from "./image/mzyy.jpg";
import qi from "./image/jinqi.jpg";

const Index: React.FC = () => {
  const [visible1, setVisible1] = useState(false);
  const location = useLocation();
  const [obj, serObj] = useState(location.state);
  // 关注状态
  const [isFollowed, setIsFollowed] = useState(false);
  const navigate = useNavigate();
  // 顶部导航栏
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ "--gap": "16px" }}>
        <SendOutline />
      </Space>
    </div>
  );
  const back = () => {
    navigate("/");
  };

  const toChat = () => {
    navigate("/customerService");
  };

  return (
    <div>
      <NavBar
        right={right}
        onBack={back}
        style={{
          background: "#1e6fff",
          color: "#fff",
          position: "fixed",
          top: 0,
          width: "96vw",
          zIndex: 999,
        }}
      >
        妙手医生网络诊室
      </NavBar>
      <div className={styles.top}>{/* 渐变色块 */}</div>
      <div className={styles.main}>
        <div className={styles.doctor}>
          {/* 医生头像 信息 */}
          <div className={styles.doctorData}>
            <div className={styles.photo}>
              <img src={obj.socoimage} alt="" />
            </div>
            <div className={styles.message}>
              <h4>
                <li>{obj.doctorname}</li> <li className={styles.logo}>{obj.socolv}</li>
                <button
                  className={styles.follow}
                  onClick={() => {
                    setIsFollowed((prevIsFollowed) => !prevIsFollowed);
                  }}
                >
                  {isFollowed ? "已关注" : "+关注"}
                </button>
              </h4>
              <p>
                <li className={styles.zhi}>{obj.doctorstate}</li>
                <li className={styles.ccc}> |</li>
                <li className={styles.ke}>{obj.socoadmin}</li>
              </p>
              <p>
                <li className={styles.yuan}>{obj.sococity}</li>
              </p>
            </div>
          </div>
          {/* 数据信息 */}
          <div className={styles.numberData}>
            <div className={styles.liu}>
              <h4>{obj.doctorbrowse}</h4>
              <p>浏览人次</p>
            </div>
            <div className={styles.hao}>
              <h4>{obj.doctorgood}%</h4>
              <p>好评率</p>
            </div>
            <div className={styles.xiang}>
              <h4>{obj.doctorprice}分钟</h4>
              <p>平均响应</p>
            </div>
            <div className={styles.fen}>
              <h4>{obj.doctorid}</h4>
              <p>粉丝数</p>
            </div>
          </div>
          {/* 擅长 */}
          <div className={styles.good}>擅长:{obj.socodescword}</div>
          <div className={styles.profile}>
            <li>
              <Button
                onClick={() => {
                  setVisible1(true);
                }}
              >
                查看简介&gt;
              </Button>
              <Popup
                visible={visible1}
                onMaskClick={() => {
                  setVisible1(false);
                }}
                onClose={() => {
                  setVisible1(false);
                }}
                bodyStyle={{ height: "55vh" }}
              >
                {
                  <div className={styles.profile}>
                    <h6 className={styles.h6}>医生简介</h6>
                    <div className={styles.goodat}>
                      <h5 className={styles.iconTitle}>
                        <li className={styles.icon}><GoodJob  /></li>
                        <li className={styles.pro}>擅长疾病</li>
                      </h5>
                      <div className={styles.content}>
                        {obj.socodescword}
                      </div>
                    </div>

                    <div className={styles.goodat}>
                      <h5 className={styles.iconTitle}>
                        <li className={styles.icon}><Manager  /></li>
                        <li className={styles.pro}>个人简介</li>
                      </h5>
                      <div className={styles.content}>
                        {obj.doctordescword}
                      </div>
                    </div>
                  </div>
                }
              </Popup>
            </li>
          </div>
        </div>

        {/* 医生服务 */}
        <div className={styles.service}>
          <div className={styles.zx} onClick={toChat}>
            <img src={zxzx} alt="" />
            <li>在线咨询</li>
            <li className={styles.c}>1对1问医生</li>
          </div>
          <div className={styles.fz}>
            <img src={fzkf} alt="" />
            <li>复诊开方</li>
            <li className={styles.c}>未开通</li>
          </div>
          <div className={styles.yx}>
            <img src={yxyf} alt="" />
            <li>优选药房</li>
            <li className={styles.c}>未开通</li>
          </div>
          <div className={styles.mz}>
            <img src={mzyy} alt="" />
            <li>门诊预约</li>
            <li className={styles.c}>预约线下就诊</li>
          </div>
        </div>
        {/* 评价 */}
        <div className={styles.evaluation}>
          <h4>
            <li>评论</li> <li className={styles.evaluationNum}>(41)</li>
            <li className={styles.more} onClick={()=>navigate('/buymedicinepinglun')}>查看更多》</li>
          </h4>
          <div className={styles.userEvaluation}>
            <p>福建赣州用户**评价了图文咨询</p>
            <div className={styles.title}>
              <li>回答很及时</li>
              <li>讲解细致耐心</li>
              <li>态度很好</li>
              <li>回答很专业</li>
            </div>
            <h3>医生非常的耐心！服务态度很好</h3>
            <p className={styles.time}>2024/07/02 16:56:21</p>
          </div>
          <div className={styles.userEvaluation}>
            <p>福建赣州用户**评价了图文咨询</p>
            <div className={styles.title}>
              <li>回答很及时</li>
              <li>讲解细致耐心</li>
              <li>态度很好</li>
              <li>回答很专业</li>
            </div>
            <h3>谢谢医生，麻烦您了！</h3>
            <p className={styles.time}>2024/06/17 21:44:16</p>
          </div>
          <div className={styles.userEvaluation}>
            <p>福建赣州用户**评价了图文咨询</p>
            <div className={styles.title}>
              <li>回答很及时</li>
              <li>讲解细致耐心</li>
              <li>态度很好</li>
              <li>回答很专业</li>
            </div>
            <h3>感谢医生</h3>
            <p className={styles.time}>2024/06/17 21:44:16</p>
          </div>
        </div>
        {/* 锦旗 */}
        <div className={styles.banner}>
          <h3>
            <li>锦旗</li>
            <li className={styles.num}>(3)</li> <li className={styles.more}>查看更多》</li>
          </h3>
          <div className={styles.userBanner}>
            <h5>山东日照赠送了医术精湛</h5>
            <p>2022/9/05 &nbsp; 23:15:08</p>
            <div className={styles.qi}>
              <img src={qi} alt="" />
            </div>
          </div>
          <div className={styles.userBanner}>
            <h5>山东日照赠送了医术精湛</h5>
            <p>2022/9/05 &nbsp; 23:15:08</p>
            <div className={styles.qi}>
              <img src={qi} alt="" />
            </div>
          </div>
          <div className={styles.userBanner}>
            <h5>山东日照赠送了医术精湛</h5>
            <p>2022/9/05 &nbsp; 23:15:08</p>
            <div className={styles.qi}>
              <img src={qi} alt="" />
            </div>
          </div>
          <div className={styles.presentBanner}>
            <div>
              <img src={qi} alt="" />
              <li>我要送锦旗&gt;</li>
            </div>
          </div>
          <div className={styles.tian}></div>
        </div>
      </div>
      <div className={styles.sendMessage}>
        <button onClick={toChat}>发消息</button>
      </div>
    </div>
  );
};

export default Index;
